<template>
    <div>
        <a-modal
            :visible="props.visible"
            :width="width"
            :title="props.title"
            :cancelText="cancelText"
            :okText="okText"
            :maskClosable="props.maskClosable"
            :class="dialogClass"
            @cancel="cancel"
        >
            <template #footer>
                <div v-if="footer">
                    <a-button key="back" @click="cancel">{{ cancelText }}</a-button>
                    <a-button key="submit" @click="handleOk" type="primary">{{ okText }}</a-button>
                </div>
                <slot name="foot1"></slot>
                <slot name="foot2"></slot>
            </template>

            <slot name="dialog"></slot>
        </a-modal>
    </div>
</template>
<script setup>
const props = defineProps({
    visible: Boolean,
    title: String,
    okText: {
        type: String,
        default: "确定",
    },
    cancelText: {
        type: String,
        default: "取消",
    },
    width: {
        type: String,
        default: "1000px",
    },
    footer: {
        type: Boolean,
        default: true,
    },
    maskClosable: {
        type: Boolean,
        default: true,
    },
    dialogClass: {
        type: String,
        default: "modalContent",
    },
});

const emit = defineEmits(["confirm", "cancel"]);
const cancel = () => {
    emit("cancel");
};
const handleOk = (e) => {
    emit("confirm");
};
</script>
<style lang='less'>
.ant-modal{
    padding:0;
}
</style>
